<template>
	<view>
		<scroll-view class="reg-scroll" scroll-y>
			<view class="reg-card">
				<view class="title"></view>
				<view class="detail"></view>
			</view>
			<view class="reg-card">
				<view :class="{'input': true, 'input-active': isPhone}">
					<input class="input__text" type="number" maxlength="11" @input="changePhoneInput" @focus="onFocusPhone" @blur="onBlurPhone"/>
					<view class="input__label">
						<view v-show="!isPhone" class="input__label-content">请输入手机号</view>
						<view v-show="isPhone" class="input__label-content">手机号</view>
					</view>
					<view class="input__line"/>
				</view>
				<view class="user-protocol d-f a-i-c">
					<radio class="user-read d-f a-i-c j-c-c" :checked="isAllow" @click="onClickAllow"/>
					<view class="text">本人已阅读并同意</view>
					<view class="d-f a-i-c">
						<view class="protocol" @click="toUserProtocolPage">《注册协议》</view>、
						<view class="policy" @click="toStrategyProtocolPage">《隐私保护政策》</view>
					</view>
				</view>
			</view>
			<view class="reg-card">
				<view class="next-step">
					<slw-button v-if="isAllow && phone.length === 11" circle class="button user-login" @click="onNextStep">下一步</slw-button>
					<slw-button v-else circle disabled class="button user-login">下一步</slw-button>
				</view>
				<view class="to-login d-f a-i-b j-c-c" @click="toUserLoginPage">已有账号？去登录</view>
			</view>
		</scroll-view>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
		<!-- <slw-load-modal v-model="loadModal"></slw-load-modal> -->
		<slw-modal v-model="visible" @cancel="onCancelPolicy" @ok="onOkPolicy">
			网易集团及旗下各关联公司（以下统称“网易”或“我们”
			一向庄严承诺保护使用网易的产品和服务（以下统称“网易服务”）之用户（以下统称“用户”或“您”）的个人信息和隐私安全
			您在使用网易服务时，我们可能会收集和使用您的相关个人信息。我们希望通过《网易集团隐私政策》（以下简称“本政策”
			向您说明我们在收集和使用您相关个人信息时对应的处理规则等相关事宜，以便更好地保障您的权益。
			本政策适用于我们提供的所有网易服务。
			当您使用我们任何单项服务时，您同意接受本政策以及我们在该单项服务中发出的特定隐私信息类政策条款（下列称“特定条款”）的保护，
			在此情况下特定条款与本政策条款同时对您产生效力。例如：使用网易在线游戏服务的用户，同时适用本政策以及《网络游戏用户隐私权保护和个人信息利用政策》
			（见附件一）；未满十四周岁的用户，同时适用本政策以及《网易儿童个人信息保护规则及监护人须知》（见附件二）。如特定条款与本政策条款存在同类条款的不一致约定，则在特定条款约束范围内应以特定条款为准。如我们提供的某一单项服务不适用本政策的，该服务中会以适当方式明示排除适用本政策。
			在使用各项网易服务前，请您务必仔细阅读并透彻理解本政策，特别是以粗体/粗体下划线标识的条款，
			您应重点阅读，在确认充分理解并同意后再开始使用。如果您不同意本政策的内容，将可能导致网易服务无法正常运行，
			或者无法达到我们拟达到的服务效果，您应立即停止访问/使用网易服务。您使用或继续使用网易服务，
			都表示您同意我们按照本政策（包括更新版本）收集、使用、储存、分享、转让和披露您的个人信息。
		</slw-modal>
	</view>
</template>

<script>
	import {toUserLoginPage, toUserRegisterConfirmPage, toUserProtocolPage, toStrategyProtocolPage} from '@/utils/PageRouter.js'
	import SlwButton from '@/components/slw-ui/button/index.vue'
	import SlwModal from '@/components/slw-ui/modal/index.vue'
	import SlwLoadModal from '@/components/slw-ui/load-modal/index.vue'
	import sliderVerify from '@/components/slider-verify/slider-verify.vue';
	export default {
		components: {SlwButton, SlwModal, SlwLoadModal,sliderVerify},
		data() {
			return {
				phone: '',
				isPhone: false,
				isAllow: false,
				visible: false,
				loadModal: false,
				sliderVerifyFLag: false //滑块验证
			}
		},
		onLoad() {
			// this.$route.query
		},
		methods: {
			 // 滑块验证结果回调函数
			verifyResult(res) {
				this.sliderVerifyFLag = false;

				if (res) {  //校验通过
					toUserRegisterConfirmPage(this.phone)
				}else{
					// 校验失败,点击关闭按钮
				}
			},
			toUserLoginPage () {
				toUserLoginPage(true)
			},
			toUserProtocolPage() {
				toUserProtocolPage()
			},
			toStrategyProtocolPage() {
				toStrategyProtocolPage()
			},
			//	写入手机号
			changePhoneInput(e) {
				const {detail: {value}} = e
				this.phone = value
			},
			onFocusPhone () {
				this.isPhone = true
			},
			onBlurPhone (e) {
				if (e.detail.value.length === 0) {
					this.isPhone = false
				}
			},
			onClickAllow() {
				this.isAllow = !this.isAllow
			},
			//	下一步
			onNextStep () {
				this.sliderVerifyFLag = true;
				// this.visible = true
			},
			onOkPolicy (e) {
				this.visible = false
				toUserRegisterConfirmPage(this.phone)
			},
			onCancelPolicy (e) {
				// e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reg-scroll /deep/{
		height: 100vh;
		background: #fff;
		.reg-card{
			padding: 90rpx 60rpx 0;
		}
		
		.title{font-size: 36rpx;}
		.detail{font-size: 28rpx;}
		
		.user-protocol{
			display: flex;
			font-size: 20rpx;
			margin: 18rpx 0 0;
			.user-read{
				margin-right: 20rpx;
				&:before{right: initial;font-size: 24rpx;}
				.uni-radio-input{
					width: 32rpx;
					height: 32rpx;
					border: 0;
					background: #eee;
				}
				.uni-radio-input-checked{
					background: #1cc7b9 !important;
				}
			}
			.text{
				color: #999;
			}
		}
		
		//	下一步
		.next-step{
			.user-login{
				button{
					font-size: 24rpx;
				}
			}
			.disabled{
				button{
					background: #ccc;
				}
			}
		}
		.to-login{
			font-size: 24rpx;
			padding-top: 20rpx;
		}
	}
	
	
	
	.input {
		position: relative;
		vertical-align: top;
		overflow: hidden;
		padding: 40rpx 0 20rpx;
	}
	
	
	.input__text {
		position: relative;
		.uni-input-input{
			padding: 0.5em 0em 0.25em;
			font-size: 2em;
		}
		z-index: 10;
	}
	
	.input__label {
		color: #9e9e9e;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 20rpx;
		transition: transform 0.2s 0.15s;
		transform-origin: left;
		&-content {
			font-size: 32rpx;
			position: relative;
			display: block;
			width: 100%;
		}
	}
	
	.input__line {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		border-bottom: 2rpx solid rgb(229,229,229);
	}
	
	
	.input-active{
		.input__label{
			transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
		}
		.input__line{
			border-color: rgb(28,199,185);
		}
	}
</style>